<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>订单确认</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <%--<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/css/order/shopcart.css">--%>
    <%--<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/css/main/bootstrap.min.css">--%>
    <%--<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery-1.8.3.js"></script>--%>
    <script type="text/javascript">
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var recipient = button.data('whatever'); // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this);
            modal.find('.modal-title').text('New message to ' + recipient);
            modal.find('.modal-body input').val(recipient)
        });
        function check_radio() {
            var add;
            var addrp = document.getElementById("addrp");
            var addr = document.getElementsByName("address");
            var address = document.getElementsByName("idsQuantity");
            document.getElementById("pay").removeAttribute("disabled");
            var addressId;
            var pass;
            for (var i = 0; i < addr.length; i++) {
                if (addr[i].checked) {
                    add = addr[i].getAttribute("ref");
                    addrp.innerHTML = add;
                    addressId = addr[i].getAttribute("value");
                    break;
                }
            }
            for (var i = 0;i<address.length;i++) {
                pass = address[i].getAttribute("value");
                pass = pass + ":" + addressId;
                address[i].setAttribute("value", pass);
            }
        }

        <%-- 由后台传过来的json字符串解析出购物信息 --%>
        function json2Object() {
            var cartobj = ${jsoncart};

            for (var i = 0; i < cartobj.length; i ++) {
                var goodsobj = cartobj[i].goods;
                for (var j = 0; j < goodsobj.length; j ++) {
                    var goodsid = goodsobj[j].id;
                    var goodsname = goodsobj[j].name;
                    var sellername = cartobj[i].seller_name;
                    var img = goodsobj[j].img;
                    var price = goodsobj[j].price;
                    var quantity = goodsobj[j].quantity;
                    var subtotal = goodsobj[j].subtotal;
                    var href = "<%=request.getContextPath() %>/goods/goodsDetail/" + goodsid;
                    var imagestr = '<img class="img-responsive" width="80" height="80" src="<%=request.getContextPath() %>/resources/images/goodsImages/' + img + '" alt=""/>';
                    var sellerstr = '<p>商家：' + sellername + '</p>';
                    var goodstr = '<p><a href="' + href + '">商品名称：' + goodsname + '</a></p><br>';

                    var content = '<tr><td>' + imagestr + '</td><td>' + goodstr + sellerstr
                            + '</td><td>' + price + '</td><td>' + quantity
                            + '</td><td>' + subtotal + '</td></tr>';
                    $("tbody").append(content);
                }
            }
        }

        function postjson() {
            $('#pay').click(function() {
//                var addr = document.getElementById("addrp").innerHTML;
                var addr;
                var address = document.getElementsByName("address");
                for (var i = 0; i < address.length; i++) {
                    if (address[i].checked) {
                        addr = address[i].getAttribute("value");
                        break;
                    }
                }
                //alert(addr);
                // JSON.stringify() 将jsonobject转为string
                var cartstr = JSON.stringify(${jsoncart});
                var json = '{"carts":' + cartstr + ', "address":' + addr + '}';
                $.post("<%=request.getContextPath() %>/order/add", {
                    cartjson : json
                }, function(msg) {
                        alert("订单提交成功！");
                        window.location.href = "<%=request.getContextPath()%>/order/orders";
                });
            });
        }
        function addAddress(){
            document.getElementById("addressForm").action = "<%=request.getContextPath() %>/cart/addUserAddress";
            document.getElementById("addressForm").submit();
        }
    </script>
    <script type="text/javascript">
        var china={};
        china['北京市']=['北京市区','北京市辖区'];
        china['上海市']=['上海市区','上海市辖区'];
        china['天津市']=['天津市区','天津市辖区'];
        china['重庆市']=['重庆市区','重庆市辖区'];
        china['河北省'] = ['石家庄', '唐山市', '邯郸市', '秦皇市岛', '保市定', '张家市口', '承德市', '廊坊市', '沧州市', '衡水市', '邢台市'];
        china['山西省']=['太原市','大同市','阳泉市','长治市','晋城市','朔州市','晋中市','运城市','忻州市','临汾市','吕梁市'];
        china['辽宁省']=['沈阳市','大连市','鞍山市','抚顺市','本溪市','丹东市','锦州市','营口市','阜新市','辽阳市','盘锦市','铁岭市','朝阳市','葫芦岛市'];
        china['吉林省']=['长春市','吉林市','四平市','辽源市','通化市','白山市','松原市','白城市','延边州','长白山管委会'];
        china['黑龙江省']=['哈尔滨市','齐齐哈尔市','大庆市','佳木斯市','牡丹江市','七台河市','双鸭山市','黑河市','鸡西市','伊春市','绥化市','鹤岗市','加格达奇市'];
        china['江苏省']=['南京市','苏州市','无锡市','常州市','南通市','扬州市','镇江市','泰州市','盐城市','连云港市','宿迁市','淮安市','徐州市'];
        china['浙江省']=['杭州市','宁波市','温州市','嘉兴市','湖州市','绍兴市','金华市','衢州市','舟山市','台州市','丽水市'];
        china['安徽省']=['合肥市','芜湖市','蚌埠市','淮南市','马鞍山市','淮北市','铜陵市','安庆市','黄山市','滁州市','阜阳市','宿州市','巢湖市','六安市','亳州市','池州市','宣城市'];
        china['福建省']=['福州市','厦门市','莆田市','三明市','泉州市','漳州市','南平市','龙岩市','宁德市'];
        china['江西省']=['南昌市','景德镇市','萍乡市','九江市','新余市','鹰潭市','赣州市','吉安市','宜春市','抚州市','上饶市'];
        china['山东省']=['济南市','青岛市','淄博市','枣庄市','东营市','烟台市','潍坊市','济宁市','泰安市','威海市','日照市','莱芜市','临沂市','德州市','聊城市','滨州市','菏泽市'];
        china['河南省']=['郑州市','开封市','洛阳市','平顶山市','安阳市','鹤壁市','新乡市','焦作市','濮阳市','许昌市','漯河市','三门峡市','南阳市','商丘市','信阳市','周口市','驻马店市'];
        china['湖北省']=['武汉市','黄石市','十堰市','荆州市','宜昌市','襄樊市','鄂州市','荆门市','孝感市','黄冈市','咸宁市','随州市'];
        china['湖南省']=['长沙市','株洲市','湘潭市','衡阳市','邵阳市','岳阳市','常德市','张家界市','益阳市','郴州市','永州市','怀化市','娄底市'];
        china['广东省']=['广州市','深圳市','珠海市','汕头市','韶关市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'];
        china['海南省']=['文昌市','琼海市','万宁市','五指山市','东方市','儋州市'];
        china['四川省 ']=['成都市','自贡市','攀枝花市','泸州市','德阳市','绵阳市','广元市','遂宁市','内江市','乐山市','南充市','眉山市','宜宾市','广安市','达州市','雅安市','巴中市','资阳市'];
        china['贵州省']=['贵阳市','六盘水市','遵义市','安顺市'];
        china['云南省']=['昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','普洱市','临沧市'];
        china['陕西省']=['西安市','铜川市','宝鸡市','咸阳市','渭南市','延安市','汉中市','榆林市','安康市','商洛市'];
        china['甘肃省']=['兰州市','金昌市','白银市','天水市','嘉峪关市','武威市','张掖市','平凉市','酒泉市','庆阳市','定西市','陇南市'];
        china['青海省']=new Array('西宁市');
        china['台湾省'] = ['台北市','高雄市','基隆市','台中市','台南市','新竹市','嘉义市'];
        china['广西壮族自治区']=['南宁市','柳州市','桂林市','梧州市','北海市','防城港市','钦州市','贵港市','玉林市','百色市','贺州市','河池市','来宾市','崇左市'];
        china['内蒙古自治区']=['呼和浩特市','包头市','乌海市','赤峰市','通辽市','鄂尔多斯市','呼伦贝尔市','巴彦淖尔市','乌兰察布市'];
        china['西藏自治区']=new Array('拉萨市');
        china['宁夏回族自治区']=['银川市','石嘴山市','吴忠市','固原市','中卫市'];
        china['新疆维吾尔自治区']=['乌鲁木齐市','克拉玛依市'];
        china['香港特别行政区']=['台北市','高雄市','基隆市','台中市','台南市','新竹市','嘉义市'];
        function chinaChange(province, city) {
            var pv, cv;
            var i, ii;
            pv = province.value;
            cv = city.value;
            city.length = 1;
            if (pv == '0') return;
            if (typeof (china[pv]) == 'undefined') return;
            for (i = 0; i < china[pv].length; i++) {
                ii = i + 1;
                city.options[ii] = new Option();
                city.options[ii].text = china[pv][i];
                city.options[ii].value = china[pv][i];
            }
            city.options[0].text = "请选择市区";

        }
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var id = button.data('id'); // Extract info from data-* attributes
            var question=button.data('question');
            var answer=button.data('answer');
            var title=button.data('title');
            var url=button.data('url');
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this);
            modal.find('.modal-title').text(title);
            modal.find('#knowledgeId').val(id);
            modal.find('#question').val(question);
            modal.find('#answer').val(answer);
            modal.find('#form').attr("action", url)
        })

    </script>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            check_radio();
            json2Object();
            postjson();
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            var level= document.getElementById('level');
            $("#t1").hover(function () {
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c4.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");

                    },function(){
                        if(!this.f){
                            $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        }
                    }
            );

            $("#t1").toggle(
                    function(){
                        this.f=true;
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c4.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");
                        level.value=1;

                    },function(){
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");
                    });


            $("#t2").hover(function () {
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c4.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");
                        $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c4.jpg)");
                        $("#t2").css("background-repeat", "no-repeat");

                    },function(){
                        if(!this.f){
                            $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                            $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");

                        }
                    }
            );

            $("#t2").toggle(
                    function(){
                        this.f=true;
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c4.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");
                        $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c4.jpg)");
                        $("#t2").css("background-repeat", "no-repeat");
                        level.value=2;
                    },function(){
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");
                        $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t2").css("background-repeat", "no-repeat");
                    });

            $("#t3").hover(function () {
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c3.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");
                        $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c3.jpg)");
                        $("#t2").css("background-repeat", "no-repeat");
                        $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c3.jpg)");
                        $("#t3").css("background-repeat", "no-repeat");
                    },function(){
                        if(!this.f){
                            $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                            $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                            $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        }
                    }
            );

            $("#t3").toggle(
                    function(){
                        this.f=true;
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c3.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");
                        $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c3.jpg)");
                        $("#t2").css("background-repeat", "no-repeat");
                        $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c3.jpg)");
                        $("#t3").css("background-repeat", "no-repeat");
                        level.value=3;


                    },function(){
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");
                        $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t2").css("background-repeat", "no-repeat");
                        $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t3").css("background-repeat", "no-repeat");
                    });

            $("#t4").hover(function () {
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");
                        $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t2").css("background-repeat", "no-repeat");
                        $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t3").css("background-repeat", "no-repeat");
                        $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t4").css("background-repeat", "no-repeat");
                    },function(){
                        if(!this.f){
                            $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                            $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                            $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                            $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        }
                    }
            );

            $("#t4").toggle(
                    function(){
                        this.f=true;
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");
                        $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t2").css("background-repeat", "no-repeat");
                        $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t3").css("background-repeat", "no-repeat");
                        $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t4").css("background-repeat", "no-repeat");
                        level.value=4;
                    },function(){
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");
                        $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t2").css("background-repeat", "no-repeat");
                        $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t3").css("background-repeat", "no-repeat");
                        $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t4").css("background-repeat", "no-repeat");
                    });

            $("#t5").hover(function () {
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");
                        $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t2").css("background-repeat", "no-repeat");
                        $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t3").css("background-repeat", "no-repeat");
                        $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t4").css("background-repeat", "no-repeat");
                        $("#t5").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t5").css("background-repeat", "no-repeat");
                    },function(){
                        if(!this.f){
                            $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                            $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                            $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                            $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                            $("#t5").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        }
                    }
            );

            $("#t5").toggle(
                    function(){
                        this.f=true;
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");
                        $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t2").css("background-repeat", "no-repeat");
                        $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t3").css("background-repeat", "no-repeat");
                        $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t4").css("background-repeat", "no-repeat");
                        $("#t5").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
                        $("#t5").css("background-repeat", "no-repeat");
                        level.value=5;

                    },function(){
                        $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t1").css("background-repeat", "no-repeat");
                        $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t2").css("background-repeat", "no-repeat");
                        $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t3").css("background-repeat", "no-repeat");
                        $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t4").css("background-repeat", "no-repeat");
                        $("#t5").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
                        $("#t5").css("background-repeat", "no-repeat");
                    })
        });
    </script>
</head>
<body>

<div  id="container">
    <%@include file="/jsp/public/top.jspf"%>
    <div id="mainbody" >
        <div  class="wrap panel panel-default" style="width: 75%">
            <!-- - - - - - - - - - - - - - 新增部分 - - - - - - - - - - - - - -->
            <div class="panel-heading">确认收货地址：</div>
            <ul class="list-group" style="margin-left: 0px;">
                <c:forEach items="${addresses}" var="address">
                    <li class="list-group-item">
                    <input type="radio" name="address" value="${address.id}"
                           ref="${address.region},${address.address}(${address.consignee}收)${address.phone}"
                           onclick="check_radio()"
                           id="${address.id}" />
                    ${address.region},${address.address}(${address.consignee}收)${address.phone}
                       <a href="<%=request.getContextPath() %>/cart/${address.id}/deleteAddress"> <span style="float: right" class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
                    </li>
                </c:forEach>
                <li class="list-group-item">
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">添加新地址</button>
                    <%--<a  data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap" href="#">添加新地址</a>--%>
                </li>
            </ul>
            <div>
            </div>
            <div class="panel-heading">确认订单：</div>
            <table class="table table-bordered" style="text-align: left">
                <thead>
                    <tr>
                        <th colspan="2">店铺宝贝</th>
                        <th>单价（元）</th>
                        <th>数量</th>
                        <th>小计（元）</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

            <div id="foot" class="pull-right">
                <div style="border: 2px solid #4CB1CA; padding: 10px; line-height: 30px; width: 400px; margin-top: 10px">
                    <strong>实付款：</strong>￥${totalMoney}<br>
                    <strong>寄送至：</strong><small id="addrp"></small>
                </div>
                <div style="margin: 5px 0; float: right">
                    <input class="btn btn-info btn-large" value="提交订单" type="submit" disabled id="pay">
                </div>
            </div>
        </div>
    </div>
    <div class="footPush"></div>
</div>
<%@include file="/jsp/public/footer.jspf"%>
</body>
</html>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">新增地址</h4>
            </div>
            <sf:form  method="post" id="addressForm"  action="" modelAttribute="address" >
            <div class="modal-body" >
                    <div class="form-group">
                        <label  class="control-label">所在地区:</label>
                        <sf:select path="region" onchange="chinaChange(this,document.getElementById('city'));" cssStyle="width:30%; height:30px;line-height:30px;">
                            <option value ="请选择市区" >请选择省份</option>
                            <option value ="北京市">北京市 </option>
                            <option value ="天津市">天津市 </option>
                            <option value ="上海市">上海市 </option>
                            <option value ="重庆市">重庆市 </option>
                            <option value ="河北省">河北省 </option>
                            <option value ="山西省">山西省 </option>
                            <option value ="辽宁省">辽宁省 </option>
                            <option value ="吉林省">吉林省 </option>
                            <option value ="黑龙江省">黑龙江省</option>
                            <option value ="江苏省"> 江苏省 </option>
                            <option value ="浙江省">浙江省 </option>
                            <option value ="安徽省">安徽省 </option>
                            <option value ="福建省">福建省 </option>
                            <option value ="江西省">江西省 </option>
                            <option value ="山东省">山东省 </option>
                            <option value ="河南省">河南省 </option>
                            <option value ="湖北省">湖北省 </option>
                            <option value ="湖南省">湖南省 </option>
                            <option value ="广东省">广东省 </option>
                            <option value ="海南省">海南省 </option>
                            <option value ="四川省">四川省 </option>
                            <option value ="贵州省">贵州省 </option>
                            <option value ="云南省">云南省 </option>
                            <option value ="陕西省">陕西省 </option>
                            <option value ="甘肃省">甘肃省 </option>
                            <option value ="青海省">青海省 </option>
                            <option value ="台湾省">台湾省 </option>
                            <option value ="广西壮族自治区">广西壮族自治区</option>
                            <option value ="内蒙古自治区"> 内蒙古自治区</option>
                            <option value ="西藏自治区"> 西藏自治区</option>
                            <option value ="宁夏回族自治区"> 宁夏回族自治区 </option>
                            <option value ="新疆维吾尔自治区">新疆维吾尔自治区</option>
                            <option value ="香港特别行政区">香港特别行政区</option>
                            <option value ="澳门特别行政区">澳门特别行政区</option>
                        </sf:select>
                        <sf:select path="region" name="city" id="city" cssStyle="width:30%; height:30px;line-height:30px;">
                            <sf:option value="选择城市">选择城市</sf:option>
                        </sf:select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">详细地址:</label>
                        <sf:input type="text" path="address" cssClass="form-control"/>
                    </div>
                    <div class="form-group">
                        <label class="control-label">邮编:</label>
                        <sf:input path="postcode"  cssClass="form-control"/>
                    </div>
                    <div class="form-group">
                        <label class="control-label">收货人:</label>
                        <sf:input path="consignee" cssClass="form-control"/>
                    </div>
                    <div class="form-group">
                        <label class="control-label">联系方式:</label>
                        <sf:input path="phone" cssClass="form-control"/>
                    </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" onclick="addAddress()" class="btn btn-primary">确认</button>
            </div>
            </sf:form>
        </div>
    </div>
</div>